import React from 'react';
import {Form, Input, Button, Col, Row, Icon/*, Card*/} from 'antd';
import {emptyRule} from './_/form';
import redux from './_/redux';
import logo from '../../res/img/logo.png';
import $ from 'jquery';
const usernameTip = '请输入登录名';
const passwordTip = '请输入密码';
const copyRights = '亿阳郑州研发中心';
const formTitle = '系统登录';
import {context} from './_';

@context('app')
@redux('app', {
    data: 'user',
    actions: 'login',
    actionsOnly: true
}, {
    showLoading: false
})
@Form.create()
class LoginForm extends React.Component {
    componentDidMount() {
        const fullHeight = (elem) => {
                const full = $(window).height();
                elem.height(full);
            },
            verticalMiddle = (elem) => {
                const marginTop = (elem.height() / (-2)) + 'px';
                elem.css({
                    marginTop
                });
            },
            setStyle = () => {
                fullHeight($('#login'));
                verticalMiddle($('#login-wrap'));
            };

        $('#username').focus();
        setStyle();
        $(window).resize(setStyle);
        const {app: {title = ''} = {}} = this.props;
        $('#title').text(title);
        document.title = title;
    }

    login = (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.props.form.validateFields((err, obj) => {
            if (!err) this.props.login(obj);
        });
    };

    render() {
        const {form, busy, error} = this.props;
        const {getFieldDecorator: fp} = form;
        const username = fp('username', {
            rules: [emptyRule(usernameTip)]
        });
        const password = fp('password', {
            rules: [emptyRule(passwordTip)]
        });
        return (
            <Form vertical onSubmit={this.login}>
                <Form.Item
                    hasFeedback
                >
                    {username(
                        <Input
                            size="large"
                            addonBefore={<Icon type="user"/>}
                            placeholder={usernameTip}
                        />
                    )}
                </Form.Item>
                <Form.Item
                    hasFeedback
                >
                    {password(
                        <Input
                            size="large"
                            addonBefore={<Icon type="lock"/>}
                            placeholder={passwordTip}
                            type="password"
                        />
                    )}
                </Form.Item>
                <Form.Item
                    className="center"
                    help={error ? error.message : ''}
                    validateStatus={error ? "error" : null}
                >
                    <Button
                        size="large"
                        type="primary"
                        htmlType="submit"
                        loading={busy}
                        className="w100"
                        style={{padding: 8}}
                    >登录</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default () => {
    const pageRespond = {
            xs: {
                span: 24
            },
            sm: {
                span: 20,
                offset: 2
            },
            md: {
                span: 20,
                offset: 2
            },
            lg: {
                span: 18,
                offset: 3
            }
        },
        boxRespond = {
            xs: {
                span: 16,
                offset: 4
            },
            sm: {
                span: 10,
                offset: 12
            },
            md: {
                span: 8,
                offset: 14
            },
            lg: {
                span: 5,
                offset: 16
            }
        };
    return (
        <div id="login">
            <Row id="login-title">
                <Col
                    {...pageRespond}
                >
                    <div className="banner">
                        <img src={logo}/>
                        <span id="title"/>
                    </div>
                </Col>
            </Row>
            <Row id="login-wrap">
                <Col
                    {...boxRespond}
                >
                    <div className="form">
                        <h2>{formTitle}</h2>
                        <LoginForm/>
                    </div>
                </Col>
            </Row>
            <Row id="login-footer">
                <Col
                    {...pageRespond}
                >
                    CopyRights &copy; {copyRights}
                </Col>
            </Row>
        </div>
    );
};
